<template>
  <div class="customer-card">
    <CardTitle title="所在群" @change="onChangeCardTitle">
      （处在<span class="led"> {{ state.userList.length || 0 }} </span>个企微群）
    </CardTitle>
    <el-tabs v-if="state.userList.length > 0" v-model="groupId" class="demo-tabs" @tab-change="onChangeTab">
      <el-tab-pane v-for="(item, index) in state.userList" :key="index" :label="item.group_name ? item.group_name + '(' + item.member_nums + ')' : '群聊' + '(' + item.member_nums + ')'" :name="`${item.group_id}`">
        <div class="cont-box" v-if="item.group_id == groupId">
          <BasicInfoUser type="group" :data="item" />
          <div class="right-box">
            <el-tabs v-model="activeName1" class="demo-tabs">
              <el-tab-pane label="互动轨迹" name="1">
                <List v-if="activeName1 == 1" maxHeight="300" :isLoading="isLoading" :sorter="state.sorter" :status="status" :dataList="state.dataList" @change="onChangeList" />
              </el-tab-pane>
              <el-tab-pane label="聊天记录" name="2">
                <ChatRecord v-if="activeName1 == 2" :isCompany="props.isCompany" :custList="props.custList" :work_user_id="item.group_id" :ltType="1" :cust_id="route.query.id" :singleData="[]" :roomid="item.chat_id" :groupData="[]" />
              </el-tab-pane>
              <!-- <el-tab-pane label="红包记录" name="3">
                <RedPacketRecord v-if="activeName1 == 3" :isCompany="props.isCompany" :custList="props.custList" />
              </el-tab-pane> -->
            </el-tabs>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
  </div>
</template>

<script setup lang="ts">
  import ChatRecord from './ChatRecord.vue'
  import { defineProps, ref, reactive } from 'vue'
  import { useRoute } from 'vue-router'

  import CardTitle from './CardTitle.vue'
  import List from './List.vue'
  import BasicInfoUser from './BasicInfoUser.vue'
  import RedPacketRecord from './RedPacketRecord.vue'
  import { getGroupInfo, getGroupTrack } from '@/api/customerCenter'

  const route = useRoute()

  interface State {
    time: string
    userList: any
    dataList: any
    sorter: { pageNum: number; pageSize: number; total: number }
  }

  const props = defineProps({
    wxExternalUserid: String,
    isCompany: Boolean,
    custList: Array
  })

  const isLoading = ref(false)
  const groupId = ref('')
  const activeName1 = ref('1')
  const status = ref(1)
  const state: State = reactive({
    time: '',
    userList: [],
    dataList: [],
    sorter: {
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  })

  // 获取页面初始化数据
  const getData = () => {
    getGroupInfo({
      wx_external_userid: props.wxExternalUserid,
      select_time: state.time,
      cust_id: route.query.id
    }).then((res: any) => {
      state.userList = res || []

      if (state.userList.length > 0) {
        groupId.value = String(res[0].group_id) // 默认选取第一个
        getGroupTrackData('creat')
      }
    })
  }

  const getGroupTrackData = (t?: string) => {
    isLoading.value = true
    getGroupTrack({ cust_id: route.query.id, groupchat_id: groupId.value, select_time: state.time, page: state.sorter.pageNum, page_size: state.sorter.pageSize }).then((res: any) => {
      isLoading.value = false

      if (t === 'creat') {
        state.dataList = res.data
        state.sorter.total = res.total
      } else {
        state.dataList.push(...res.data)
      }
    })
  }

  const onChangeCardTitle = (e: any) => {
    state.time = e.join('~')
    state.sorter.pageNum = 1
    getData()
  }

  const onChangeTab = () => {
    state.sorter.pageNum = 1
    activeName1.value = '1'
    getGroupTrackData('creat')
  }

  const onChangeList = (e: any) => {
    state.sorter.pageNum = state.sorter.pageNum + 1
    getGroupTrackData()
  }
</script>

<style lang="scss" scoped>
  .customer-card {
    padding: 16px 20px;

    .cont-box {
      display: flex;
      justify-content: space-between;

      .left-box {
        flex: 0 0 310px;
        width: 310px;
      }
      .right-box {
        flex: auto;
        padding: 10px 20px;
        margin-left: 16px;
        background: #ffffff;
        border: 1px solid #eaeaea;
      }
    }
  }
</style>
